<template>
  <div class="common-banner">
    <img src="@/assets/images/square/app-market-banner.png" alt="" />
    <div class="content">
      <div class="common-w-box">
        <div class="txt-c">
          <div class="t1">数据库</div>
          <div class="search-c">
            <el-input
              v-model="dataBaseArticleName"
              placeholder="请输入需要搜索的内容"
              class="input-with-select"
              size="large"
            >
              <template #prepend>
                <el-select
                  v-model="dataBaseCateGoryId"
                  placeholder="请选择分类"
                  style="width: 130px"
                  size="large"
                >
                  <el-option label="全部类型" :value="0" />
                  <el-option
                    v-for="item in dataBaseCateGoryList"
                    :key="item.id"
                    :label="item.databaseCategoryName"
                    :value="item.id"
                  />
                </el-select>
              </template>
              <template #append>
                <el-button
                  type="primary"
                  link
                  class="search-btn"
                  @click="onSearchDataBaseArticle"
                >
                  搜索
                </el-button>
              </template>
            </el-input>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { respDataBaseCategoryData } from '@/api/types/database'
import { onMounted, onUnmounted, ref } from 'vue'
import emitter from '@/utils/emitter.ts'

const dataBaseCateGoryList = ref<respDataBaseCategoryData[]>([])
onMounted(() => {
  emitter.on('dataBaseArticleList', (list: respDataBaseCategoryData[]) => {
    dataBaseCateGoryList.value = list
  })
})
onUnmounted(() => emitter.off('dataBaseArticleList'))

const dataBaseArticleName = ref<string>('')
const dataBaseCateGoryId = ref<number>(0)
const onSearchDataBaseArticle = () => {
  emitter.emit('searchData', {
    categoryId: dataBaseCateGoryId.value,
    articleName: dataBaseArticleName.value,
  })
}
</script>

<style scoped lang="scss"></style>
